<template>
  <!--,initialValue:''  新增-->
  <a-modal v-model="visible" :title="title" :confirmLoading="submitLoading" width="600px" ok-text="确认" cancel-text="取消"
    @ok="addFormSubmit">
    <a-form layout="vertical" :form="events_form">
      <a-form-item label="渠道名称">
        <a-input v-decorator="['channelName', { rules: [{ required: true, message: '请输入渠道名称' }] }]" placeholder="请输入渠道名称"/>
      </a-form-item>
      <a-form-item label="渠道联系人">
        <a-input v-decorator="['concatUserName', { rules: [{ required: true, message: '请输入渠道联系人' }] }]" placeholder="请输入渠道联系人"/>
      </a-form-item>
      <a-form-item label="合作类型">
        <a-input v-decorator="['cooperationType', { rules: [{ required: true, message: '请输入合作类型' }] }]" placeholder="请输入合作类型"/>
      </a-form-item>
      <a-form-item label="联系电话">
        <a-input v-decorator="['concatPhone', { rules: [{ required: true, message: '请输入联系电话!' }],initialValue: ''}]" placeholder="请输入联系电话"/>
      </a-form-item>
      <a-form-item label="员工性别">
        <a-select v-decorator="['sex']" placeholder="请选择员工性别">
          <a-select-option key="男">
            男
          </a-select-option>
          <a-select-option key="女">
            女
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>

  </a-modal>
</template>

<script>
  import {
    addChannel,
    editChannel
  } from "@/api/human/canal"
  export default {
    name: 'AddCanal',
    data() {
      return {
        visible: false,
        title: '',
        id: '',
        submitLoading: false
      }
    },
    beforeCreate() {
      this.events_form = this.$form.createForm(this, {
        name: 'events_form'
      });
    },
    computed: {
      vifyState() {
        var flag = true;
        if (this.id) {
          flag = false;
        }
        return flag;
      }
    },
    methods: {
      async add(rows) {
        this.title = rows === true ? '新增渠道' : '编辑渠道';
        this.id = rows === true ? '' : rows.channelId;
        if (rows === true) {
          this.$nextTick(() => {
            this.events_form.resetFields();
          })
          this.visible = true;
        } else {
          this.id = rows.channelId;
          this.$nextTick(() => {
            let values = this.events_form.getFieldsValue();
            for (var key in rows) {
              values[key] = rows[key]
            }
            this.events_form.setFieldsValue(values);
          });
          this.visible = true;
        }
      },
      addFormSubmit() {
        const that = this;
        this.events_form.validateFieldsAndScroll(async (err, values) => {
          if (!err) {
            if (that.id) {
              values.channelId = that.id;
            }
            that.submitLoading = true;
            const {
              code
            } = that.id ? await editChannel(values) : await addChannel(values);
            that.submitLoading = false;
            if (code === '1') {
              that.visible = false;
              let state = that.id ? false : true;
              that.$emit('on-ok', state);
            }
          }
        });
      }
    }
  }
</script>
